<template lang="pug">
  div(:class="$style.search")
    //- transition
    div(:class="$style.header")
      material-tab(:class="$style.tab" :list="sources" align="left" item-key="id" item-name="name" v-model="searchSourceId")
    div(v-if="listInfo.list.length" :class="$style.list")
      div(:class="$style.thead")
        table
          thead
            tr
              th.nobreak.center(style="width: 5%;") #
              th.nobreak {{$t('view.search.name')}}
              th.nobreak(style="width: 22%;") {{$t('view.search.singer')}}
              th.nobreak(style="width: 22%;") {{$t('view.search.album')}}
              th.nobreak(style="width: 8%;") {{$t('view.search.time')}}
              th.nobreak(style="width: 13%;") {{$t('view.search.action')}}
      div.scroll(:class="$style.tbody" ref="dom_scrollContent")
        table
          tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
            tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)")
              td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
              td.break
                span.select {{item.name}}
                span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}}
                span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}}
                span(:class="[$style.labelSource, $style.noSelect]" v-if="searchSourceId == 'all'") {{item.source}}
              td.break(style="width: 22%;")
                span.select {{item.singer}}
              td.break(style="width: 22%;")
                span.select {{item.albumName}}
              td(style="width: 8%;")
                span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
              td(style="width: 13%; padding-left: 0; padding-right: 0;")
                material-list-buttons(:index="index" :remove-btn="false" :class="$style.listBtn"
                  :play-btn="assertApiSupport(item.source)"
                  :download-btn="assertApiSupport(item.source)"
                  @btn-click="handleListBtnClick")
        div(:class="$style.pagination")
          material-pagination(:max-page="listInfo.allPage" :limit="listInfo.limit" :page="page" @btn-click="handleTogglePage")
    div(v-else :class="$style.noitem")
      div.scroll(:class="$style.noitemListContainer" v-if="setting.search.isShowHotSearch || setting.search.isShowHistorySearch")
        dl(:class="[$style.noitemList, $style.noitemHotSearchList]" v-if="setting.search.isShowHotSearch")
          dt(:class="$style.noitemListTitle") {{$t('view.search.hot_search')}}
          dd(:class="$style.noitemListItem" @click="handleNoitemSearch(item)" v-for="item in hotSearchList") {{item}}
        dl(:class="$style.noitemList" v-if="setting.search.isShowHistorySearch && historyList.length")
          dt(:class="$style.noitemListTitle")
            span {{$t('view.search.history_search')}}
            span(:class="$style.historyClearBtn" @click="clearHistory" :title="$t('view.search.history_clear')")
              svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
                use(xlink:href='#icon-eraser')
          dd(:class="$style.noitemListItem" v-for="(item, index) in historyList" @contextmenu="removeHistory(index)" :key="index + item" @click="handleNoitemSearch(item)" :title="$t('view.search.history_remove')") {{item}}
      div(v-else :class="$style.noitem_list")
        p {{$t('view.search.no_item')}}
    material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
    material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectedData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
    //- material-flow-btn(:show="isShowEditBtn && (searchSourceId == 'all' || assertApiSupport(searchSourceId))" :remove-btn="false" @btn-click="handleFlowBtnClick")
    material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="handleListAddModalClose")
    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectedData" @close="handleListAddMultipleModalClose")
    material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
</template>

<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { scrollTo, clipboardWriteText, assertApiSupport, openUrl } from '../utils'
import musicSdk from '../utils/music'
export default {
  name: 'Search',
  data() {
    return {
      page: 0,
      text: '',
      clickTime: 0,
      clickIndex: -1,
      isShowDownload: false,
      musicInfo: null,
      selectedData: [],
      // isShowEditBtn: false,
      isShowDownloadMultiple: false,
      searchSourceId: null,
      isShowListAdd: false,
      isShowListAddMultiple: false,
      keyEvent: {
        isShiftDown: false,
        isModDown: false,
      },
      lastSelectIndex: 0,
      listMenu: {
        isShowItemMenu: false,
        itemMenuControl: {
          play: true,
          addTo: true,
          download: true,
          sourceDetail: true,
        },
        menuLocation: {
          x: 0,
          y: 0,
        },
      },
    }
  },
  beforeRouteUpdate(to, from, next) {
    if (to.query.text === undefined) return
    this.text = to.query.text
    this.page = 1
    this.handleSearch(this.text, this.page)
    next()
  },
  created() {
    this.listenEvent()
  },
  beforeDestroy() {
    this.unlistenEvent()
  },
  mounted() {
    // console.log('mounted')

    // 处理搜索源不存在时页面报错的问题
    if (!this.sourceList[this.setting.search.searchSource] && this.setting.search.searchSource != 'all') {
      this.setSearchSource({
        searchSource: 'kw',
      })
    }
    this.searchSourceId = this.setting.search.searchSource
    if (this.$route.query.text === undefined) {
      this.text = this.$store.getters['search/searchText']
      this.page = this.listInfo.page
    } else if (this.$route.query.text === '') {
      this.clearList()
    } else {
      this.text = this.$route.query.text
      this.page = 1
      this.handleSearch(this.text, this.page)
    }
    this.handleGetHotSearch()
  },
  watch: {
    // selectedData(n) {
    //   const len = n.length
    //   if (len) {
    //     this.isShowEditBtn = true
    //   } else {
    //     this.isShowEditBtn = false
    //   }
    // },
    'listInfo.list'() {
      this.removeAllSelect()
    },
    searchSourceId(n) {
      if (n === this.setting.search.searchSource) return
      this.$nextTick(() => {
        this.page = 1
        this.handleSearch(this.text, this.page)
        this.handleGetHotSearch()
      })
      this.setSearchSource({
        searchSource: n,
      })
    },
  },
  computed: {
    ...mapGetters(['userInfo', 'setting']),
    ...mapGetters('search', ['sourceList', 'allList', 'sources', 'historyList']),
    ...mapGetters('list', ['defaultList']),
    listItemMenu() {
      return [
        {
          name: this.$t('view.search.list_play'),
          action: 'play',
          disabled: !this.listMenu.itemMenuControl.play,
        },
        {
          name: this.$t('view.search.list_download'),
          action: 'download',
          disabled: !this.listMenu.itemMenuControl.download,
        },
        {
          name: this.$t('view.search.list_add_to'),
          action: 'addTo',
          disabled: !this.listMenu.itemMenuControl.addTo,
        },
        {
          name: this.$t('view.search.list_source_detail'),
          action: 'sourceDetail',
          disabled: !this.listMenu.itemMenuControl.sourceDetail,
        },
      ]
    },
    listInfo() {
      return this.setting.search.searchSource == 'all' ? this.allList : this.sourceList[this.setting.search.searchSource]
    },
    hotSearchList() {
      return this.$store.getters['hotSearch/list'][this.setting.search.searchSource] || []
    },
  },
  methods: {
    ...mapMutations(['setSearchSource']),
    ...mapActions('search', ['search']),
    ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
    ...mapMutations('search', ['clearList', 'setPage', 'removeHistory', 'clearHistory']),
    ...mapMutations('list', ['listAdd', 'listAddMultiple']),
    ...mapMutations('player', ['setList']),
    ...mapActions('hotSearch', {
      getHotSearch: 'getList',
    }),
    listenEvent() {
      window.eventHub.$on('key_shift_down', this.handle_key_shift_down)
      window.eventHub.$on('key_shift_up', this.handle_key_shift_up)
      window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
      window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
      window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
    },
    unlistenEvent() {
      window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
      window.eventHub.$off('key_shift_up', this.handle_key_shift_up)
      window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
      window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
      window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
    },
    handle_key_shift_down() {
      if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
    },
    handle_key_shift_up() {
      if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false
    },
    handle_key_mod_down() {
      if (!this.keyEvent.isModDown) this.keyEvent.isModDown = true
    },
    handle_key_mod_up() {
      if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
    },
    handle_key_mod_a_down({ event }) {
      if (event.target.tagName == 'INPUT') return
      event.preventDefault()
      if (event.repeat) return
      this.keyEvent.isModDown = false
      this.handleSelectAllData()
    },
    handleSearch(text, page) {
      if (text === '') return this.clearList()

      this.search({ text, page, limit: this.listInfo.limit }).then(data => {
        this.page = page
        this.$nextTick(() => {
          scrollTo(this.$refs.dom_scrollContent, 0)
        })
      })
    },
    handleDoubleClick(event, index) {
      if (event.target.classList.contains('select')) return

      this.handleSelectData(event, index)

      if (
        window.performance.now() - this.clickTime > 400 ||
        this.clickIndex !== index
      ) {
        this.clickTime = window.performance.now()
        this.clickIndex = index
        return
      }
      this.testPlay(index)
      this.clickTime = 0
      this.clickIndex = -1
    },
    handleListBtnClick(info) {
      switch (info.action) {
        case 'download':
          this.musicInfo = this.listInfo.list[info.index]
          this.$nextTick(() => {
            this.isShowDownload = true
          })
          break
        case 'play':
          this.testPlay(info.index)
          break
        case 'listAdd':
          this.musicInfo = this.listInfo.list[info.index]
          this.$nextTick(() => {
            this.isShowListAdd = true
          })
          break
      }
    },
    handleSelectData(event, clickIndex) {
      if (this.keyEvent.isShiftDown) {
        if (this.selectedData.length) {
          let lastSelectIndex = this.lastSelectIndex
          this.removeAllSelect()
          if (lastSelectIndex != clickIndex) {
            let isNeedReverse = false
            if (clickIndex < lastSelectIndex) {
              let temp = lastSelectIndex
              lastSelectIndex = clickIndex
              clickIndex = temp
              isNeedReverse = true
            }
            this.selectedData = this.listInfo.list.slice(lastSelectIndex, clickIndex + 1)
            if (isNeedReverse) this.selectedData.reverse()
            let nodes = this.$refs.dom_tbody.childNodes
            do {
              nodes[lastSelectIndex].classList.add('active')
              lastSelectIndex++
            } while (lastSelectIndex <= clickIndex)
          }
        } else {
          event.currentTarget.classList.add('active')
          this.selectedData.push(this.listInfo.list[clickIndex])
          this.lastSelectIndex = clickIndex
        }
      } else if (this.keyEvent.isModDown) {
        this.lastSelectIndex = clickIndex
        let item = this.listInfo.list[clickIndex]
        let index = this.selectedData.indexOf(item)
        if (index < 0) {
          this.selectedData.push(item)
          event.currentTarget.classList.add('active')
        } else {
          this.selectedData.splice(index, 1)
          event.currentTarget.classList.remove('active')
        }
      } else if (this.selectedData.length) this.removeAllSelect()
    },
    removeAllSelect() {
      this.selectedData = []
      let dom_tbody = this.$refs.dom_tbody
      if (!dom_tbody) return
      let nodes = dom_tbody.querySelectorAll('.active')
      for (const node of nodes) {
        if (node.parentNode == dom_tbody) node.classList.remove('active')
      }
    },
    testPlay(index) {
      let targetSong = this.listInfo.list[index]
      // if (!targetSong || !this.assertApiSupport(targetSong.source)) return
      this.listAdd({ id: 'default', musicInfo: targetSong })
      let targetIndex = this.defaultList.list.findIndex(
        s => s.songmid === targetSong.songmid,
      )
      if (targetIndex > -1) {
        this.setList({
          list: this.defaultList,
          index: targetIndex,
        })
      }
    },
    handleTogglePage(page) {
      this.handleSearch(this.text, page)
    },
    handleAddDownload(type) {
      this.createDownload({ musicInfo: this.musicInfo, type })
      this.isShowDownload = false
    },
    handleAddDownloadMultiple(type) {
      this.createDownloadMultiple({ list: this.filterList(this.selectedData), type })
      this.removeAllSelect()
      this.isShowDownloadMultiple = false
    },
    handleSelectAllData() {
      this.removeAllSelect()
      this.selectedData = [...this.listInfo.list]
      let nodes = this.$refs.dom_tbody.childNodes
      for (const node of nodes) {
        node.classList.add('active')
      }
    },
    // handleFlowBtnClick(action) {
    //   switch (action) {
    //     case 'download':
    //       this.isShowDownloadMultiple = true
    //       break
    //     case 'play':
    //       this.testPlay()
    //       this.removeAllSelect()
    //       break
    //     case 'add':
    //       this.isShowListAddMultiple = true
    //       break
    //   }
    // },
    filterList(list) {
      return this.searchSourceId == 'all'
        ? list.filter(s => this.assertApiSupport(s.source))
        : this.assertApiSupport(this.searchSourceId)
          ? [...list] : []
    },
    handleListAddModalClose() {
      this.isShowListAdd = false
    },
    handleListAddMultipleModalClose(isClearSelect) {
      if (isClearSelect) this.removeAllSelect()
      this.isShowListAddMultiple = false
    },
    handleContextMenu(event) {
      if (!event.target.classList.contains('select')) return
      event.stopImmediatePropagation()
      let classList = this.$refs.dom_scrollContent.classList
      classList.add(this.$style.copying)
      window.requestAnimationFrame(() => {
        let str = window.getSelection().toString()
        classList.remove(this.$style.copying)
        str = str.trim()
        if (!str.length) return
        clipboardWriteText(str)
      })
    },
    handleGetHotSearch() {
      if (this.hotSearchList.length || !this.setting.search.isShowHotSearch) return
      this.getHotSearch(this.setting.search.searchSource)
    },
    handleNoitemSearch(text) {
      this.$router.push({
        path: 'search',
        query: {
          text,
        },
      })
    },
    assertApiSupport(source) {
      return assertApiSupport(source)
    },
    handleListItemRigthClick(event, index) {
      this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[this.listInfo.list[index].source].getMusicDetailPageUrl
      this.listMenu.itemMenuControl.play =
        this.listMenu.itemMenuControl.download =
        this.assertApiSupport(this.listInfo.list[index].source)
      let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
      if (dom_selected) dom_selected.classList.remove('selected')
      this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
      let dom_td = event.target.closest('td')
      this.listMenu.rightClickItemIndex = index
      this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
      this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
      this.$nextTick(() => {
        this.listMenu.isShowItemMenu = true
      })
    },
    hideListMenu() {
      let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
      if (dom_selected) dom_selected.classList.remove('selected')
      this.listMenu.isShowItemMenu = false
      this.listMenu.rightClickItemIndex = -1
    },
    handleListItemMenuClick(action) {
      // console.log(action)
      let index = this.listMenu.rightClickItemIndex
      this.hideListMenu()
      let minfo
      let url
      switch (action && action.action) {
        case 'play':
          if (this.selectedData.length) {
            this.listAddMultiple({ id: 'default', list: this.filterList(this.selectedData) })
            this.removeAllSelect()
          }
          this.testPlay(index)
          break
        case 'addTo':
          if (this.selectedData.length) {
            this.$nextTick(() => {
              this.isShowListAddMultiple = true
            })
          } else {
            this.musicInfo = this.listInfo.list[index]
            this.$nextTick(() => {
              this.isShowListAdd = true
            })
          }
          break
        case 'download':
          if (this.selectedData.length) {
            this.isShowDownloadMultiple = true
          } else {
            minfo = this.listInfo.list[index]
            if (!this.assertApiSupport(minfo.source)) return
            this.musicInfo = minfo
            this.$nextTick(() => {
              this.isShowDownload = true
            })
          }
          break
        case 'sourceDetail':
          minfo = this.listInfo.list[index]
          url = musicSdk[minfo.source].getMusicDetailPageUrl(minfo)
          if (!url) return
          openUrl(url)
          break
      }
    },
  },
}
</script>

<style lang="less" module>
@import '../assets/styles/layout.less';

.search {
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.header {
  flex: none;
}
.list {
  // position: relative;
  height: 100%;
  font-size: 14px;
  display: flex;
  flex-flow: column nowrap;
  flex: auto;
  overflow: hidden;
}
.thead {
  flex: none;
  tr > th:first-child {
    color: @color-theme_2-font-label;
    // padding-left: 10px;
  }
}
.tbody {
  flex: auto;
  overflow-y: auto;
  td {
    font-size: 12px;
    :global(.badge) {
      margin-left: 3px;
    }
    &:first-child {
      // padding-left: 10px;
      font-size: 11px;
      color: @color-theme_2-font-label;
    }
  }
  :global(.badge) {
    opacity: .85;
  }

  &.copying {
    .no-select {
      display: none;
    }
  }
}
.listBtn {
  min-height: 24px;
}
.labelSource {
  color: @color-theme;
  padding: 5px;
  font-size: .8em;
  line-height: 1;
  opacity: .75;
}
.pagination {
  text-align: center;
  padding: 15px 0;
  // left: 50%;
  // transform: translateX(-50%);
}
.noitem {
  flex: auto;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;

  p {
    font-size: 24px;
    color: @color-theme_2-font-label;
    text-align: center;
  }
}
.noitem-list-container {
  padding: 0 15px;
  margin-top: -20px;
  min-height: 300px;
  max-height: 94.7%;
}
.noitem-list {
  +.noitem-list {
    margin-top: 15px;
  }
}
.noitem-hot-search-list {
  min-height: 106px;
}
.noitem-list-title {
  color: @color-theme_2-font-label;
  padding: 5px;
  font-size: 14px;
}
.noitem-list-item {
  display: inline-block;
  margin: 3px 5px;
  background-color: @color-btn-background;
  padding: 7px 10px;
  border-radius: @radius-progress-border;
  transition: background-color @transition-theme;
  cursor: pointer;
  font-size: 13px;
  color: @color-btn;
  .mixin-ellipsis-1;
  max-width: 150px;
  &:hover {
    background-color: @color-btn-hover;
  }
  &:active {
    background-color: @color-btn-active;
  }
}
.history-clear-btn {
  padding: 0 5px;
  margin-left: 5px;
  color: @color-theme_2-font-label;
  cursor: pointer;
  transition: color @transition-theme;
  &:hover {
    color: @color-theme-hover;
  }
  &:active {
    color: @color-theme-active;
  }
  svg {
    vertical-align: middle;
    width: 15px;
  }
}

each(@themes, {
  :global(#container.@{value}) {
    .labelSource {
      color: ~'@{color-@{value}-theme}';
    }
    .noitem {
      p {
        color: ~'@{color-@{value}-theme_2-font-label}';
      }
    }
    .noitem-list-title {
      color: ~'@{color-@{value}-theme_2-font-label}';
    }
    .noitem-list-item {
      color: ~'@{color-@{value}-btn}';
      background-color: ~'@{color-@{value}-btn-background}';
      &:hover {
        background-color: ~'@{color-@{value}-btn-hover}';
      }
      &:active {
        background-color: ~'@{color-@{value}-btn-active}';
      }
    }
    .tbody {
      td {
        &:first-child {
          color: ~'@{color-@{value}-theme_2-font-label}';
        }
      }
    }
    .history-clear-btn {
      color: ~'@{color-@{value}-theme_2-font-label}';
      &:hover {
        color: ~'@{color-@{value}-theme-hover}';
      }
      &:active {
        color: ~'@{color-@{value}-theme-active}';
      }
    }
  }
})
</style>
